<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
    <link rel="stylesheet" href="/css/listuser.css">
    <meta charset="UTF-8">
    <title>用户信息列表</title>
</head>
<style>


</style>

<body>
<header>
    <h1>星龙小说网</h1>
</header>
<nav class="navbar">
    <ul>
        <li><a href="/index.html">首页</a></li>
        <li><a href="/Allnovels.html">全部小说</a></li>
        <li><a href="/about.html">关于我们</a></li>
        <li><a href="/listuser.html">用户信息</a></li>
        <li><a href="BookCar.html">我的书单</a></li>
    </ul>
    <span class="userinfo">用户名：<span id="name"></span>&nbsp;<a href="" onclick="loginout()">注销</a></span>
    <span class="gotologin">请先<a href="login.html">登录</a></span>
</nav>
<div class="container-listuser">
    <h1>用户信息</h1>
    <table>
        <thead>
        <tr>
            <th>头像</th>
            <th>昵称</th>
            <th>账号</th>
            <th>密码</th>
            <th>性别</th>
            <th>地址</th>
            <th>邮箱</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 在这里添加表格内容 -->

        </tbody>
    </table>
</div>

</body>
<script>
    // jQuery入口函数
    $(function () {
        userlogin();
    })

    // 登录校验
    function userlogin() {
        $.get("http://localhost:8080/getUser", null, function (data) {
            if (data === "") {
                alert("请先登录！")
                window.location.href = "login.html";
            } else {
                $(".gotologin").hide();
                $(".userinfo").show()
                $("#name").text(data.nikename);
                showinfo();
            }
        })
    }

    // jQ渲染数据
    // function showinfo(){
    //     // 参数1：访问路径，参数2：请求参数，参数3：回调函数
    //     $.get("http://localhost:8080/getAllUsers",null,function (data){
    //         console.log(data)
    //         for(var i=0;i<data.length;i++){
    //             // 数据的渲染、
    //             // $(".username")[i]找到该标签，
    //             // $($(".username")[i]).text    调用方式.text()赋值进去
    //             $($(".username")[i]).text(data[i].username)
    //             $($(".userpassword")[i]).text(data[i].userpassword)
    //             $($(".nikename")[i]).text(data[i].nikename)
    //             $($(".gender")[i]).text(data[i].gender)
    //             $($(".address")[i]).text(data[i].address)
    //             $($(".email")[i]).text(data[i].email)
    //             $($(".phone")[i]).text(data[i].phone)
    //             //后代选择器".userimg img"   userimg中的img标签
    //             // $($(".userimg img")[i]).attr("src","./userimg/"+data[i].userimg)
    //             // 数据库中有头像信息就设置进去没有就使用默认0.jpg
    //             if (data[i].userimg) {
    //                 $(".userimg img").eq(i).attr("src", "./userimg/" + data[i].userimg);
    //             }
    //         }
    //     })
    // }

    // 动态加载页面
    function showinfo() {
        // 参数1：访问路径，参数2：请求参数，参数3：回调函数
        $.get("http://localhost:8080/getAllUsers", null, function (data) {
            console.log(data)
            for (var i = 0; i < data.length; i++) {
                $("tbody").append(
                    '<tr>' +
                    '<td class="userimg"><img src="' + /userimg/ + data[i].userimg + '" alt="头像"></td>' +
                    '<td class="nikename">' + data[i].nikename + '</td>' +
                    '<td class="username">' + data[i].username + '</td>' +
                    '<td class="userpassword">' + data[i].userpassword + '</td>' +
                    '<td class="gender">' + data[i].gender + '</td>' +
                    '<td class="address">' + data[i].address + '</td>' +
                    '<td class="email">' + data[i].email + '</td>' +
                    '<td class="phone">' + data[i].phone + '</td>' +
                    '<td class="opera"><button onclick="deleteUser(this)" data-username=" ' + data[i].username + ' " type="button" class="user-delete">删除</button><button data-username= ' + data[i].username + 'type="button" class="user-update">修改</button></td>' +
                    '</tr>'
                );
            }
        })
    }

    // 删除用户
    function deleteUser(button) {

        var username = $(button).data('username');
        alert("即将删除"+username)
        $.get('http://localhost:8080/delete/',{"username":username},function (data){
            alert(data)
            showinfo()
        })

    }


</script>
</html>

